<!-- 订单 -->
<template>
	<view class="">
		<scroll-view scroll-y="true" >
			<view>
				<uni-card class="order-container" :title="order.title" type="line" v-for="(order, orderIndex) in orderList" :key="orderIndex">
					<view class="order-wrapper">
						<view class="order-wrapper-item">
							<text>下单时间：{{order.createTime}}</text>
							<text>{{order.status}}</text>
						</view>
						<uni-grid class="order-wrapper-grid" :column="4" :highlight="true" :show-border="false">
							<uni-grid-item class="order-wrapper-grid-item order-wrapper-grid-icon" v-for="(item, index) in order.orders" :key="index">
								<image class="order-wrapper-grid-item-img" :src="item.icon" color="#777"></image>
							</uni-grid-item>
							<uni-grid-item class="order-wrapper-grid-item right-text">
								<text class="font-12">共{{order.orders.length}}件</text>
								<text>￥{{totalPrice[orderIndex]}}</text>
							</uni-grid-item>
						</uni-grid>
						<button class="order-wrapper-btn" plain type="primary" size="mini" @tap="handleMore">再来一单</button>
					</view>
				</uni-card>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderList: [
					{
						title: "店铺名",
						createTime: "2022-05-03 11:53:28",
						status: "已完成",
						orders: [
							{
								icon: "/static/banner0.png",
								name: "红烧牛肉",
								price: "55",
								count: "2",
							},
							{
								icon: "/static/banner0.png",
								name: "红烧牛肉",
								price: "55",
								count: "2",
							},
							{
								icon: "/static/banner0.png",
								name: "红烧牛肉",
								price: "55",
								count: "2",
							}
						]
					},
					{
						title: "店铺名",
						createTime: "2022-05-03 11:53:28",
						status: "已完成",
						orders: [
							{
								icon: "/static/banner0.png",
								name: "红烧牛肉",
								price: "55",
								count: "2",
							}
						]
					},
					{
						title: "店铺名",
						createTime: "2022-05-03 11:53:28",
						status: "已完成",
						orders: [
							{
								icon: "/static/banner0.png",
								name: "红烧牛肉",
								price: "55",
								count: "2",
							},
							{
								icon: "/static/banner0.png",
								name: "红烧牛肉",
								price: "55",
								count: "2",
							},
							{
								icon: "/static/banner0.png",
								name: "红烧牛肉",
								price: "55",
								count: "2",
							}
						]
					},
				]
			}
		},
		computed: {
			totalPrice() {
				let totalPrices = [];
				let total = 0;
				this.orderList.forEach(order => {
					order.orders.forEach(item => {
						total += item.price * item.count;
					})
					totalPrices.push(total);
					total = 0;
				})
				return totalPrices
			}
		},
		methods: {
			handleMore() {
				console.log("123");
				uni.switchTab({
					url:'/pages/shopping/index'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.order-container {
		text-align: right;
		.order-wrapper {
			.order-wrapper-item {
				padding: 5px 0;
				display: flex;
				justify-content: space-between;
			}
			.order-wrapper-grid {
				.order-wrapper-grid-item {
					display: flex;
					justify-content: center;
					align-items: center;
					.order-wrapper-grid-item-img {
						width: 55px;
						height: 55px;
					}
				}
				.order-wrapper-grid-icon {
					text-align: center;
					line-height: 55px;
				}
				.right-text {
					text-align: right;
					position: absolute;
					right: 20px;
					line-height: 30px;
					.font-12 {
						font-size: 12px;
						color: #333;
					}
				}
			}
			.order-wrapper-btn {
			}
		}
	}
</style>